<template>
  <el-dialog
    @close="handleClose"
    :title="$t('operator.level_expired_mail')"
    width="40%"
    bodyStyle="padding:0px;"
  >
    <!--      <el-form-item>
              <el-input v-model="dataForm.operatorName" placeholder='E-mail' clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getDataList(pageNo = 1)"></el-button>
            </el-form-item>-->
    <el-table
      :data="dataList"
      v-loading="dataListLoading"
      ref="multipleTable"
      height="400"
      stripe
    >
      <el-table-column prop="configValue" :label="$t('operator.email')">
      </el-table-column>
      <el-table-column prop="creTime" :label="$t('group.operator.creTime')">
        <template v-slot="scope">
          <label>{{ formatDate(scope.row.creTime, "YYYY-MM-DD  HH:mm:ss") }}</label>
        </template>
      </el-table-column>
      <el-table-column width="75px">
        <template v-slot="scope">
          <!--          <el-tooltip class="item" effect="dark" :content="$t('common.updateBtn')" placement="top">
                      <el-button @click="updateHandle(scope.row.configId)" style="color: #f8ae01" icon="el-icon-edit"></el-button>
                    </el-tooltip>-->
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('common.deleteBtn')"
            placement="top"
          >
            <el-button
              style="color: var(--color-danger)"
              @click="deleteHandle(scope.row.configId, scope.row.configValue)"
              text
            >
              <svg-icon icon-class="Delete" />
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-popover placement="top" width="300" v-model="addEmailVisible">
          <div>
            <el-form :model="dataForm" @close="cancelEmailHandle">
              <el-input
                v-model="dataForm.email"
                :placeholder="$t('common.email')"
                maxlength="120"
                @blur="() => (dataForm.email = dataForm.email.trim())"
                clearable
              ></el-input>

              <div align="right" class="mt-2">
                <span>
                  <el-button text size="small" @click="cancelEmailHandle">{{
                    $t("common.cancel")
                  }}</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    :loading="addEmailLoading"
                    @click="addEmailHandle()"
                    >{{ $t("common.confirm") }}</el-button
                  >
                </span>
              </div>
            </el-form>
          </div>
          <template #reference>
            <el-button v-if="isAuth('10400202.MANAGE')" type="primary" class="w-8"
              ><svg-icon icon-class="Plus" /></el-button
          ></template>
        </el-popover> </span
    ></template>
  </el-dialog>
</template>

<script>
import { formatDate } from "@/utils/formatDate";
import { getRemindEmail, saveRemindEmail, deleteRemindEmail } from "@/api/operator";
import { isAuth } from "@/utils";

export default {
  data() {
    return {
      comfirmLoading: false,
      addEmailVisible: false,
      addEmailLoading: false,
      dataForm: {
        email: "",
      },
      dataList: [],
      dataListLoading: false,
      pageNo: 1,
      pageSize: 10,
      rows: 0,
    };
  },
  created() {},
  methods: {
    init() {
      this.dataList = [];
      this.pageNo = 1;
      this.getDataList();
    },
    cancel() {
      this.$emit("update:model-value", false);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      console.log(val);
      this.pageNo = val;
      this.getDataList();
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf();
      return formatDate(cellValue, fmt);
    },
    getDataList() {
      this.dataListLoading = true;
      let params = {
        operatorName: this.dataForm.operatorName,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      console.log(params);
      this.dataListLoading = true;
      getRemindEmail()
        .then((data) => {
          this.dataListLoading = false;
          console.log(data);
          this.dataList = data;
          this.rows = data.rows;
        })
        .catch((e) => {
          this.$confirmError(e);
          this.loading = false;
          this.dataListLoading = false;
        });
    },
    handleClose() {
      this.dataForm.email = "";
      this.$emit("update:model-value", false);
      this.comfirmLoading = false;
    },
    addEmailHandle() {
      const entity = {
        configValue: this.dataForm.email,
      };
      this.addEmailLoading = true;
      saveRemindEmail(entity)
        .then((data) => {
          this.getDataList();
          this.addEmailLoading = false;
          this.addEmailVisible = false;
          this.dataForm.email = "";
        })
        .catch((e) => {
          this.$confirmError(e);
          this.addEmailLoading = false;
        });
    },
    cancelEmailHandle() {
      this.addEmailVisible = false;
      this.dataForm.email = "";
    },
    updateHandle(id) {},
    deleteHandle(id, email) {
      this.$confirm(this.$t("operator.tipDeleteEmail", { email: email }), "", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
      }).then(() => {
        deleteRemindEmail(id)
          .then((data) => {
            this.getDataList();
          })
          .catch((err) => {
            this.$confirmError(err);
          });
      });
    },
    isAuth,
  },
};
</script>
